<template>
  <el-dialog
    title="分配角色"
    :visible.sync="allocDialogVisible"
    width="50%"
    center
  >
    <div class="select_item" align="center">
      <el-select class='new-el-select' v-model="roleIds" multiple placeholder="请选择" >
        <el-option
          v-for="item in roleOptions"
          :key="'role'+item.roleId"
          :label="item.name"
          :value="item.roleId"
        >
        </el-option>
      </el-select>
    </div>
    <div style="margin-top: 40px" align="center">
      <el-button type="primary" @click="handleSave()">保存</el-button>
      <el-button @click="handleClose()">清空</el-button>
    </div>
  </el-dialog>
</template>
<script>
import user_api from "@/api/user";
export default {
  data() {
    return {
      allocDialogVisible: false,
      roleOptions: [],
      roleIds: [],
      adminId:1
    };
  },
  created(){
    user_api.roleListAll().then((res) => {
        this.roleOptions = res.data
    })
  },
  methods:{
    handleSave(){
        this.$confirm('是否分配角色?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        let params = new URLSearchParams()
        params.append('adminId',this.adminId)
        params.append('roleIds',Array.from(this.roleIds))
        user_api.updateRole(params).then(res =>{
            this.$message({
            message:'分配成功',
            type:'success',
            duration:1000
          })
          this.allocDialogVisible = false
        })
      })
    },
    getAdminRole(){
       this.roleIds = []
        user_api.getRoleList(this.adminId).then(res =>{
            res.data.forEach(item =>{
                this.roleIds.push(item.roleId)
            })
        })
    },
    handleClose(){
       this.roleIds = []

    },

    singRoleUpdate(adminId){
        this.allocDialogVisible = true
        this.adminId = adminId
        this.getAdminRole()
    }
  }
};
</script>

<style>
.new-el-select{
    width: 300px;
}
</style>